<template>
    <div class="divPage">
        <div class=" divHeader">
            <div class="divTitle">Kms demo</div>
            <ul class="lstTopAcs">
                <li>
                    <el-button @click="closeChannel" size="small">close channel</el-button>
                </li>
            </ul>
            <div class="user">
                <i class="fa fa-user-circle"></i> demo
            </div>
        </div>
        <div class="divBody">
            <div class="videoList">
                <div class="divVideo">
                    <video id="lv" autoplay playsinline ></video>
                    <div class="videoTitle">self</div>
                    <ul class="lstVideoAcs">
                        <li>
                            <el-dropdown trigger="click" @command="setCamera">
                                <span class="el-dropdown-link">
                                    <i class="fa fa-camera" style="color:#fff"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item :command="item.deviceId"
                                        v-for="(item,index) in cameras"
                                        :key="index"
                                    >
                                        {{item.label}}
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </li> 
                        <li @click="shareScreen"><i class="fa fa-tv"></i></li>
                    </ul>
                </div>
                <div class="divVideo">
                    <video id="rv-s01" autoplay playsinline ></video>
                    <div class="videoTitle">s01</div>
                    <ul class="lstVideoAcs"> 
                    </ul>
                </div> 
                <div class="divVideo">
                    <video id="rv-s02" autoplay playsinline ></video>
                    <div class="videoTitle">s02</div>
                    <ul class="lstVideoAcs"> 
                    </ul>
                </div> 
                <div class="divVideo">
                    <video id="rv-s03" autoplay playsinline ></video>
                    <div class="videoTitle">s03</div>
                    <ul class="lstVideoAcs"> 
                    </ul>
                </div> 
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            var me = this;
            try{
                me.roleCode = me.$route.query.r && me.$route.query.r!=null &&me.$route.query.r.length>0? me.$route.query.r:me.roleCode;
                
                me.loadChannel().then(_=>{
                    return me.createPusher();
                }).then(_=>{
                    return me.createPullers();
                }).then(_=>{
                    console.log('kms demo ...' , me.kmsConnection ,  me.channel );
                });
            }
            catch(er){
                console.log(er);
            }
        },
        data() {
            return {
                roleCode: 's01',
                settings:{
                    channelCode: 'chdemo',
                    seatCodes:['s01','s02','s03']
                },
                cameras:[],
                channel: null
            };
        },
        methods: {
            loadChannel() {
                var me = this;
                return new Promise((success, faild) => {
                    try {
                        me.kmsConnection.getKmsClient().then(_=>{  
                            me.cameras = me.kmsConnection.cameras;
                            return me.kmsConnection.getChannel(me.settings.channelCode , me.settings.seatCodes);
                        }).then(res=>{
                            me.channel = res.success?res.channel: null;
                            success();
                        });
                    } catch (er) {
                        console.log(er);
                        success();
                    }
                }); 
            },
            createPusher() {
                var me = this;
                return new Promise((success, faild) => {
                    try {
                        var viewCode = "pusher_"+me.roleCode;
                        var viewType = "s";
                        var video = document.getElementById('lv');
                        var deviceId = me.kmsConnection.cameras && me.kmsConnection.cameras!=null && me.kmsConnection.cameras.length>0?me.kmsConnection.cameras[0].deviceId:"";
                        deviceId = me.kmsConnection.cameras[1].deviceId;
                        var seatCode = me.roleCode;
                        var autoOpen = true;
                        me.channel.createView(viewCode, viewType, video, deviceId, seatCode, autoOpen).then(_=>{
                            success();
                        });
                    } catch (er) {
                        console.log(er);
                        success();
                    }
                }); 
            },
            createPullers() {
                var me = this;
                return new Promise((success, faild) => {
                    try { 
                        var index =0;
                        var loadItem =()=>{
                            if( index< me.settings.seatCodes.length){
                                var seatCode = me.settings.seatCodes[index];
                                var viewCode = "pull_"+me.roleCode+"_"+seatCode;
                                var viewType = "r";
                                var video = document.getElementById('rv-'+ seatCode);
                                var deviceId = "";
                                var autoOpen = true;
                                me.channel.createView(viewCode, viewType, video, deviceId, seatCode, autoOpen).then(_=>{
                                    index++;
                                    loadItem();
                                });
                            }
                            else{
                                success();
                            }
                        };
                        loadItem();
                    } catch (er) {
                        console.log(er);
                        success();
                    }
                }); 
            },
            startRecord() {
                var me = this;
                return new Promise((success, faild) => {
                    try {
                        me.setViews();

                    } catch (er) {
                        console.log(er);
                        success();
                    }
                }); 
            },
            setCamera(deviceId) {
                var me = this;
                return new Promise((success, faild) => {
                    try {
                        var peer = me.channel.views['pusher_'+me.roleCode].peer;
                        me.channel.connection.setCamera(peer , deviceId).then(_=>{
                            ;
                        })
                    } catch (er) {
                        console.log(er);
                        success();
                    }
                }); 
            },
            shareScreen() {
                var me = this;
                return new Promise((success, faild) => {
                    try {
                        var peer = me.channel.views['pusher_'+me.roleCode].peer;
                        me.channel.connection.shareScreen(peer ).then(_=>{
                            ;
                        })

                    } catch (er) {
                        console.log(er);
                        success();
                    }
                }); 
            },
            closeChannel() {
                var me = this;
                try {
                    me.channel.closeChannel( me.settings.channelCode).then(_=>{
                        ;
                    })

                } catch (er) {
                    console.log(er); 
                }
            },
        },
        
    }
</script>

<style lang="less" scoped>
    .divHeader{
        background-color: #e5e5e5;
        box-shadow: 2px 2px 2px #999;
        padding: 10px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .divTitle{
            
            font-weight: bold;
            text-align: left;
        }

        ul.lstTopAcs{
            display: flex;
            margin: 0;
            top: 0;
            list-style: none;
            li{
                padding: 0 10px;
            }
        }
    }

    .divBody{
        padding: 15px;
        .videoList{
            width: 100%;
            display: grid;
            grid-template-columns: 50% 50% ;
            .divVideo{
                position: relative;
                height: 0;
                padding-bottom: 56.26%;
                border: 2px solid #222;
                video{
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    background-color: #333;
                }
                .videoTitle{
                    position: absolute;
                    left: 15px;
                    top:15px;
                    padding: 5px 10px;
                    background-color: rgba(0, 0, 0, 0.6);
                    color: #fff;
                }
                ul.lstVideoAcs{
                    position: absolute;
                    right: 10px;                    
                    top:10px;
                    list-style: none;
                    display: flex;
                    padding: 0;
                    margin: 0;
                    li{
                        padding: 5px;
                        i{
                            width: 32px;
                            height: 32px;
                            line-height: 32px;
                            text-align: center;
                            background-color: rgba(0, 0, 0, 0.6);
                            color: #fff;
                            border-radius: 16px;
                            
                        }
                    }
                }
            }
        }
    }
</style>